<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<p>{{msg}}</p>
			<p>{{msg|msgFormat}}</p>
			<p>{{msg|msgFormat2("善良")}}</p>
		</div>
	</body>
	<script>
		/*
		 * 过滤器的调用的格式： {{要过滤的值|过滤器的名称}}
		 * 过滤器的定义：
		 * 		第一个参数：要过滤的值，即过滤器管道前面的值
		 * 	Vue.filter(过滤器的名称,function(){})
		 */
		//定义一个"全局"过滤器：将单纯替换成 邪恶
		//全局过滤器：所有的vm对象都共享
		Vue.filter("msgFormat", function(data) {
			return data.replace(/单纯/g, "邪恶");
		});

		//定义一个过滤器：将单纯替换成 传过来的值
		Vue.filter("msgFormat2", function(data, msgFor) {
			return data.replace(/单纯/g, msgFor);
		});

		var vue = new Vue({
			el: "#app",
			data: {
				msg: "曾经，我是一个单纯的少年"
			},
			methods: {

			},
			/**
			 * filters:用于定义私有的过滤器
			 * 		过滤器的两个条件=> 过滤器名称:处理函数
			 * 注意：如果私有过滤器 和全局过滤器名称一样，先调用私有过滤器
			 */
			filters: {
				msgFormat: function(data) {
					return data.replace(/单纯/g, "邪恶！！！");
				}
			}
		});
	</script>

</html>